import { Form, Input, DatePicker, ConfigProvider } from 'antd'
import moment from 'moment'
import { getMessage } from '@inbiz/react';
import { GlobalRegistry } from '@inbiz/core';
import { useMemo } from 'react';
import { commonLang } from '@inbiz/utils';


const CustomValue = (props) => {
  const { item, onSelected, index } = props
  const [form] = Form.useForm()
  const onValuesChange = (changedValues) => {
    const changekeys = Object.keys(changedValues)
    form.validateFields().then(res => {
      if (res) {
        for (let i = 0; i < changekeys.length; i++) {
          const element = changekeys[i];
          if (typeof changedValues[element] == 'string' && changedValues[element]) {
            onSelected(
              [`${element}:(${changedValues[element]})`],
              true,
              index,
              item.IsWhether,
            );
          } else if (changedValues[element] && changedValues[element][0]) {
            const value0 = changedValues[element][0]
            const value1 = changedValues[element][1]
            onSelected(
              [`${element}:[${moment(value0).format('YYYY-MM-DD')} TO ${moment(value1).format('YYYY-MM-DD')}]`],
              true,
              index,
              item.IsWhether,
            );
          } else {
            onSelected(
              [''],
              false,
              index,
              item.IsWhether,
            );
          }
        }
      }
    })
  }
  const locale = useMemo(() => {
    const _lang = GlobalRegistry.getDesignerLanguage();
    return commonLang[_lang?.toLocaleLowerCase()?.replace('-', '_') as keyof typeof commonLang || 'zh_cn'];
  }, [GlobalRegistry.getDesignerLanguage()]);
  
  const componentObj: { [key: string]: JSX.Element } = useMemo(() => {
    return {
      date: <DatePicker.RangePicker showTime={false} key={GlobalRegistry.getDesignerLanguage()} />,
      keyword: <Input placeholder={getMessage('SearchResultEngine.pleaseInput')} />
    }
  }, [GlobalRegistry.getDesignerLanguage()]);
  return <ConfigProvider locale={locale}><Form form={form} onSubmitCapture={(e) => { e.preventDefault(); return false }} onValuesChange={
    (val) => {
      // 不知道为什么, 这个定时器是必须的
      setTimeout(() => {
        onValuesChange(val)
      }, 16)
    }} >
    <Form.Item name={item.Key}
      rules={[
        () => ({
          validator(_, value) {
            // 必须返回一个Promise
            if (item.Key == 'fileextname') {
              const regStr = /[!~^()\-\+{}\[\]\\:"\/]/g // 这几个符号是一个一个输进去试出来的
              if (regStr.test(value)) {
                return Promise.reject(new Error(getMessage('SearchResultEnginePreview.specialsymbol')))
              }
              return Promise.resolve()
            }
            return Promise.resolve()
          },
        })
      ]}
    >
      {componentObj[item.IndexFieldType] ?? <Input placeholder={getMessage('SearchResultEngine.pleaseInput')} />}
    </Form.Item>
  </Form>
  </ConfigProvider>
}
export default CustomValue
